<template>
	<view class="">
		<!-- 状态栏 -->
		<view class="status_bar">
		</view>
		<view class="home-index">
			<Tabs></Tabs>
			<view class="nav">
				<view class="title">
					个人信息
				</view>
				<scroll-view scroll-y="true" class="scroll-index">
					<view class="item tx" @click="selectImg">
						<view class="name">
							头像
						</view>
						<view class="cont">
							<image src="../../static/images/default.png" mode=""></image>
						</view>
						<image src="../../static/images/arrow.png" mode=""></image>
					</view>
					<view :class="['item',showInfo=='xm'?'active':'']" @click="handleName">
						<view class="name">
							姓名
						</view>
						<view class="cont">
							{{name}}
						</view>
						<image src="../../static/images/arrow.png" mode=""></image>
					</view>
					<view class="item">
						<view class="name">
							性别
						</view>
						<view class="cont">
							<picker @change="bindPickerChange" range-key="name" :value="sexIndex" :range="sex">
								<view class="uni-input">{{sex[sexIndex]['name']}}</view>
							</picker>
						</view>
						<image src="../../static/images/arrow.png" mode=""></image>
					</view>
					<view class="item">
						<view class="name">
							角色
						</view>
						<view class="cont">
							{{nickname}}
						</view>
						<!-- <image src="../../static/images/arrow.png" mode=""></image> -->
					</view>
					<view class="item">
						<view class="name">
							账号
						</view>
						<view class="cont">
							{{mobile}}
						</view>
						<!-- <image src="../../static/images/arrow.png" mode=""></image> -->
					</view>
					<view :class="['item',showInfo=='password'?'active':'']" @click="handlePass">
						<view class="name">
							密码
						</view>
						<view class="cont">
							修改密码
						</view>
						<image src="../../static/images/arrow.png" mode=""></image>
					</view>
					<view class="logout" @click="logout">
						退出登录
					</view>
				</scroll-view>
				
			</view>
			<view class="info">
				<view class="header" v-if="showInfo">
					<image src="../../static/images/arrowLeft.png" mode="" @click="hideChange"></image>
					<view class="title">
						{{title}}
					</view>
				</view>
				<!-- 姓名 -->
				<view class="xm" v-if="showInfo=='xm'">
					<view class="item">
						<view class="name">
							姓名
						</view>
						<view class="inp">
							<input type="text" value="" v-model="name" />
						</view>
					</view>
					<view class="save">
						保存
					</view>
				</view>
				<!-- 密码 -->
				<view class="xm" v-if="showInfo=='password'">
					<view class="item">
						<view class="name">
							原密码
						</view>
						<view class="inp">
							<!-- <input type="password" value="" /> -->
							<input-box  ref="input1" type="password" :verification="['isNull','isChineseEnlishAndNumber']" :verificationTip="['密码不能为空','']"  placeholder="请输入原密码" maBtm="10"></input-box>
						</view>
					</view>
					<view class="item newpassword">
						<view class="name">
							新密码
						</view>
						<view class="inp">
							<!-- <input type="password" value="" /> -->
							<input-box  ref="input2" type="password" :verification="['isNull','isChineseEnlishAndNumber']" :verificationTip="['密码不能为空','']"  placeholder="请输入新密码" maBtm="10"></input-box>
						</view>
					</view>
					<view class="item">
						<view class="name">
							确认密码
						</view>
						<view class="inp">
							<!-- <input type="password" value="" /> -->
							<input-box  ref="input3" type="password" :verification="['isNull','isChineseEnlishAndNumber']" :verificationTip="['密码不能为空','']"  placeholder="请输入新密码" maBtm="10"></input-box>
						</view>
					</view>
					<view class="save" @click="handlePassword">
						保存
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '../../api/http.js'
	import Tabs from '../../components/tabs.vue'
	export default {
		data() {
			return {
				showInfo:'',
				title:'',
				imgUrl:"",
				name:'',
				sexIndex:0,
				nickname:'',
				sex:[
					{
						id:1,
						name:'男'
					},
					{
						id:0,
						name:'女'
					}
				],
				info:{}
			}
		},
		components:{Tabs},
		onLoad() {
			this.getPersonalInfo()
		},
		methods: {
			handleName(){
				this.showInfo = 'xm';
				this.title = '修改姓名'
			},
			handlePass(){
				this.showInfo = 'password',
				this.title = '修改密码'
				this.name = ''
			},
			hideChange(){
				this.showInfo = ''
				this.name = ''
			},
			bindPickerChange(e){
				this.sexIndex = e.detail.value;
				this.updateInfo()
			},
			//图片
			selectImg() {
				let self = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(rst) {
						let src = rst.tempFilePaths[0]
						self.imgUrl = src;
					}
				});
			},
			handlePassword(){
				let oldValue = this.$refs.input1.getValue()
				let newValue = this.$refs.input2.getValue()
				let newValue1 = this.$refs.input2.getValue()
				if(newValue!=newValue1){
					uni.showToast({
						title:'两次输入新密码不一致',
						icon:'none'
					})
					return;
				}
				console.log(oldValue,"原密码")
			},
			updateInfo(){
				let userId = uni.getStorageSync('userId')
				let data = {
					  "gender": this.sex[this.sexIndex]['name'],
					  "nickname": "",
					  "password": "",
					  "userId": userId
					}
					http.post('app/updateUser',data).then(res=>{
						console.log(res,"修改用户信息")
					})
			},
			getPersonalInfo(){
				let usreId = uni.getStorageSync('userId')
				http.get('app/getUserInfo/'+usreId).then(res=>{
					console.log(res,"个人信息")
					if(res.code==0){
						this.info = res.user
						this.name = res.user.username
						let gender = res.user.gender;
						this.nickname = res.user.nickname
						this.mobile = res.user.mobile;
						// gender = '女'
						this.sex.map((item,index)=>{
							if(item.name == gender){
								console.log(index,"索引")
								this.sexIndex = index
							}
						})
						
					}
				})
			},
			logout(){
				uni.setStorageSync('token','')
				uni.setStorageSync('userId','')
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
.home-index{
	display: flex;
	height: calc(100vh - var(--status-bar-height));
	.nav{
		display: flex;
		flex-direction: column;
		width: 40%;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
		padding: 0 10px;
		.title{
			display: flex;
			align-items: center;
			font-size: 24px;
			color: #235FA7;
			height: 60px;
		}
		.scroll-index{
			height: calc(100vh - 60px - var(--status-bar-height));
		}
		.logout{
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10px;
			border:1px solid red;
			margin: 10px 0;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			height: 50px;
			position: relative;
			padding-right: 30px;
			padding-left: 20px;
			border-bottom: 1px solid #f2f2f2;
			.name{
				font-size: 18px;
				color: #333333;
			}
			.cont{
				color: #666666;
				&>image{
					width: 50px;
					height: 50px;
					border-radius: 50%;
				}
			}
			&>image{
				width: 14px;
				height: 16px;
				position: absolute;
				right: 10px;
				top: 50%;
				margin-top: -7px;
			}
		}
		.active{
			background-color: #F5F7F9;
		}
		
		.tx{
			height: 80px;
		}
		
	}
	.info{
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #E8EFF7;
		flex:1;
		padding: 10px;
		.header{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			height: 60px;
			position: relative;
			background-color: white;
			border-bottom: 1px solid #f2f2f2;
			.title{
				display: flex;
				justify-content: center;
			}
			image{
				width: 18px;
				height: 20px;
				position: absolute;
				left: 10px;
			}
		}
		.xm{
			display: flex;
			flex-direction: column;
			flex:1;
			// background-color: white;
			.item{
				display: flex;
				align-items: center;
				background-color: white;
				height: 50px;
				
				border-bottom: 1px solid #f2f2f2;
				.name{
					display: flex;
					font-size: 16px;
					padding: 0 10px;
				}
				.inp{
					display: flex;
					align-items: center;
					flex:1;
					input{
						width: 100%;
						height: 50px;
					}
				}
			}
			.newpassword{
				margin-top: 10px;
			}
			.save{
				display: flex;
				justify-content: center;
				align-items: center;
				// position: absolute;
				width: 80%;
				height: 40px;
				background-color: #0F75BF;
				// left: 50%;
				margin-left: 10%;
				margin-top: 20px;
				// bottom: 50px;
				font-size: 22px;
				font-weight: bold;
				border-radius: 10px;
				color: white;
			}
		}
	}
}
</style>
